<template>
  <div class="checkweb">
    <p>每月总访问量</p>
    <div style="width: 0; height:0;margin-top:20px;" id="check"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(window.innerHeight);
    document.getElementById("check").style.width =window.innerWidth / 2 - 200 + "px"; //初始化echarts图表宽度
    document.getElementById("check").style.height =window.innerHeight / 2 - 220 + "px"; //初始化echarts图表高度
    let myChart = this.$echarts.init(document.getElementById("check"));
    window.addEventListener("resize", () => {
      document.getElementById("check").style.width =
        window.innerWidth / 2 - 200 + "px";
      myChart.resize();
      document.getElementById("check").style.height =
        window.innerHeight / 2 - 220 + "px";
      myChart.resize();
    });
    this.lineCheck();
  },
  methods: {
    lineCheck() {
      let myChart = this.$echarts.init(document.getElementById("check"));
      let option;

      const data = [
        ["2000-06-01", 90],
        ["2000-06-02", 149],
        ["2000-06-03", 125],
        ["2000-06-04", 106],
        ["2000-06-05", 116],
        ["2000-06-06", 129],
        ["2000-06-07", 135],
        ["2000-06-08", 86],
        ["2000-06-09", 73],
        ["2000-06-10", 75],
        ["2000-06-11", 173],
        ["2000-06-12", 68],
        ["2000-06-13", 192],
        ["2000-06-14", 130],
        ["2000-06-15", 45],
        ["2000-06-16", 89],
        ["2000-06-17", 85],
        ["2000-06-18", 111],
        ["2000-06-19", 99],
        ["2000-06-20", 106],
        ["2000-06-21", 137],
        ["2000-06-22", 128],
        ["2000-06-23", 185],
        ["2000-06-24", 94],
        ["2000-06-25", 71],
        ["2000-06-26", 106],
        ["2000-06-27", 84],
        ["2000-06-28", 133],
        ["2000-06-29", 165],
        ["2000-06-30", 113],
      ];
      const dateList = data.map(function (item) {
        return item[0];
      });
      const valueList = data.map(function (item) {
        return item[1];
      });
      myChart.setOption({
        visualMap: {
          show: false,
          type: "continuous",
          seriesIndex: 0,
          min: 0,
          max: 250,
        },
        title:{
          left:"5%",
          top:"5%",
          text:"人/次",
          textStyle:{
            fontStyle:"18px",
          }
        },
        xAxis:{
          data: dateList,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: '{value}次'  //添加单位
          },
        },
        tooltip: {
          trigger: "axis",
          formatter:"{b}</br>{c}次"
        },
        series: [
          {
            data: valueList,
            showSymbol: false,
            type: "line",
            label: {
              show: true,
              position: 'top',
              formatter:"{c}次"
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.checkweb{
  font-weight: bold;
  font-family:黑体;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
</style>